<template>
  <div class="pages">
    <div class="top">
      <div class="circle">
        <div v-if="totalInfo.total">
          <span>{{ totalInfo.total }}</span>
          个工
        </div>
        <div>
          <span>{{ totalInfo.pieceTotal }}</span>
          件
        </div>
        <div>总记工</div>
      </div>
      <div class="react">
        <div>未签字</div>
        <div>
          <span>{{ totalInfo.notSigned }}</span>
          个工
        </div>
        <div v-show="totalInfo.pieceNotSigned">
          <span>{{ totalInfo.pieceNotSigned }}</span>
          件
        </div>
      </div>
      <div class="react">
        <div>已签字</div>
        <div>
          <span>{{ totalInfo.signed }}</span>
          个工
        </div>
        <div v-show="totalInfo.pieceSigned">
          <span>{{ totalInfo.pieceSigned }}</span>
          件
        </div>
      </div>
    </div>
    <div class="bottom-bg">
      <table class="table" cellspacing="0">
        <tr>
          <th class="th-0">月份</th>
          <th class="th-1">
            工天
            <br />
            <span class="th-text">(个工)</span>
          </th>
          <th class="th-2">状态</th>
          <th class="th-3">查看</th>
        </tr>
        <template v-for="(item,index) in list" :key="index">
          <tr @click="toSignature(item.recordYear, item.recordMonth)">
            <td class="tb-top0">
              <div @click.stop="setxpand(item)">
                <Icon :class="['tb-top0-triangle', item.collapse ? 'down-to-up' : 'up-to-down']" name="play" color="#56B6FF" />
                {{ `${item.recordYear}年${item.recordMonth}月` }}
              </div>
            </td>
            <td class="tb-top1">{{ item.recordTotal }}</td>
            <td class="tb-top2">
              <div class="tb-top2-info">
                <div>
                  <div class="tb-top2-text1">未签字</div>
                  <div class="tb-top2-text2">
                    <span>{{ item.notSigned }}</span>
                    个工
                  </div>
                  <div v-show="item.pieceNotSigned" class="tb-top2-text2">
                    <span>{{ item.pieceNotSigned }}</span>
                    件
                  </div>
                </div>
                <div>
                  <div class="tb-top2-text1">已签字</div>
                  <div class="tb-top2-text2">
                    <span>{{ item.signed }}</span>
                    个工
                  </div>
                  <div v-show="item.pieceSigned" class="tb-top2-text2">
                    <span>{{ item.pieceSigned }}</span>
                    件
                  </div>
                </div>
              </div>
            </td>
            <td />
          </tr>
          <template v-for="(item1,index1) in item.detail" :key="index1">
            <tr v-show="item.collapse" @click="toSignature(item.recordYear, item.recordMonth)">
              <td class="tb-info0">{{ `${item1.recordMonth}月${item1.recordDay}日` }}</td>
              <td class="tb-top1">{{ item1.recordNum }}</td>
              <td class="tb-info2">{{ item1.desc }}</td>
              <td>
                <VanImage v-if="item1.base64Path" height="0.96rem" fit="contain" :src="item1.base64Path" />
              </td>
            </tr>
          </template>
        </template>
      </table>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
import { allsigndata, gettotal } from '@/api/businessApi'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { Icon, Image as VanImage, Toast } from 'vant'
export default defineComponent({
  components: { Icon, VanImage },
  setup() {
    const store = useStore()
    let promisea, promiseb
    /** ----------------获取数据---------------------*/
    const list = ref<any>([])

    const getList = () => {
      promisea = allsigndata({
        foremanTel: store.getters.foremanTel,
        workerId: store.getters.workerId,
        bossTel: store.getters.bossTel
      }).then((res) => {
        list.value = res.data.map((res) => {
          return { ...res, collapse: false }
        })
      })
    }
    getList()
    const totalInfo = reactive({
      notSigned: '',
      total: '',
      signed: '',
      pieceTotal: '',
      pieceSigned: '',
      pieceNotSigned: ''
    })
    const gettotalInfo = () => {
      promiseb = gettotal({
        foremanTel: store.getters.foremanTel,
        workerId: store.getters.workerId,
        bossTel: store.getters.bossTel
      }).then((res) => {
        Object.assign(totalInfo, res.data)
      })
    }
    gettotalInfo()

    /** --------------------------------------------*/
    const setxpand = (row) => {
      row.collapse = !row.collapse
    }
    /** 查看签字*/
    const router = useRouter()
    const toSignature = (recordYear: string, recordMonth: string) => {
      router.push({
        name: 'Signature',
        query: {
          recordYear,
          recordMonth
        }
      })
    }
    Promise.all([promisea, promiseb]).then(() => {
      console.log('guanbi')
      Toast.clear()
    })
    return {
      setxpand,
      toSignature,
      list,
      totalInfo
    }
  }
})
</script>

<style lang="scss" scoped>
.pages {
  background: #f7f7f7;
  min-height: 100vh;
  padding-top: 16px;
}
.top {
  width: 750px;
  height: 230px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.circle {
  width: 210px;
  height: 210px;
  background: rgba(86, 182, 255, 0.12);
  border-radius: 105px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #333333;
  div:first-child {
    font-size: 24px;
    padding-bottom: 6px;
  }
  span {
    font-size: 36px;
  }
}
.react {
  width: 180px;
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #333333;
  div:first-child {
    font-size: 26px;
    padding-bottom: 10px;
  }
  span {
    font-size: 30px;
    color: #ff6616;
  }
}
.bottom-bg {
  padding: 0 10px;
  margin-top: 17px;
  width: $width730;
}
.table {
  width: 730px;
  th {
    background: #56b6ff;
    color: #ffffff;
    height: 72px;
    font-size: 30px;
    font-weight: 400;
  }
  td {
    background: #ffffff;
  }
  .th {
    &-text {
      font-size: 22px;
    }
    &-0 {
      width: 194px;
    }
    &-1 {
      width: 105px;
    }
    &-2 {
      width: 258px;
    }
  }
  tr th {
    border-right: 1px solid #fff;
  }
  tr th:last-child {
    border: 0;
  }
  tr td {
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
  }
  tr td:last-child {
    border-right: 0;
  }
  td {
    height: 72px;
  }
}
.tb {
  &-top0 {
    font-size: 28px;
    font-weight: 400;
    color: #333333;
    > div {
      display: flex;
      align-items: center;
    }
    &-triangle {
      font-size: 24px;
    }
  }
  &-top1 {
    text-align: right;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 18px;
  }
  &-top2 {
    padding-left: 30px;
    padding-right: 30px;
    &-info {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
    }

    &-text1 {
      color: #666666;
      font-size: 20px;
    }
    &-text2 {
      padding-top: 2px;
      color: #333333;
      font-size: 16px;
      span {
        font-size: 18px;
        color: #ff6616;
      }
    }
  }
  &-info0 {
    color: #666666;
    font-size: 26px;
    text-indent: 1em;
  }
  &-info2 {
    text-align: center;
    font-size: 18px;
  }
}
/**箭头翻转效果*/
.up-to-down {
  animation: upTodown 0.3s ease forwards;
}
.down-to-up {
  animation: downToup 0.3s ease forwards;
}
@keyframes downToup {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}
@keyframes upTodown {
  0% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
</style>
